<template>
  <el-card>
    <div class="card-title">
      在线用户
    </div>
    <div class="search-container">
      <el-input class="search-inp" v-model="searchModel.keyword" placeholder="输入关键词查询"></el-input>
      <el-button icon="Refresh" @click="handleResetClick">重置</el-button>
      <el-button icon="Search" type="primary" @click="handleSearchClick">搜索</el-button>
    </div>
    <div class="online-container">
      <el-table :data="onlineData">
        <el-table-column prop="avatar" label="用户头像" align="center">
          <template #default="scope">
            <img class="avatar" :src="scope.row.avatar" alt="用户头像">
          </template>
        </el-table-column>
        <el-table-column prop="nickName" label="昵称" align="center"></el-table-column>
        <el-table-column prop="ipAddress" label="IP地址" align="center"></el-table-column>
        <el-table-column prop="ipSource" label="来源" align="center"></el-table-column>
        <el-table-column prop="lastLoginTime" label="上次登录时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-popconfirm width="200" title="是否强制当前用户下线?" @confirm="handleDeleteClick(scope.row.userInfoId)">
                <template #reference>
                    <el-button type="danger" icon="SwitchButton" plain link>强退</el-button>
                </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination-container"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchModel.current"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="searchModel.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { queryUsersOnline, offlineUser } from '@/service/common/user'
import showMsg from '@/utils/message/message';
import type { IUserOnlineItem } from './types'
import type { IUsersOnlineParams } from '@/types/common'

const total = ref<number>(0)
const onlineData = ref<IUserOnlineItem[]>()
const searchModel = ref<IUsersOnlineParams>({
  current: 1,
  size: 10,
  keyword: ''
})

const handleResetClick = () => {
  searchModel.value = {
    current: 1,
    size: 10,
    keyword: ''
  }
  refreshPage()
}

const handleSearchClick = () => {
  refreshPage(true)
}

const handleDeleteClick = (id: number) => {
  offlineUser(id)
    .then((res) => {
      if (res.code === 2001) {
        showMsg('success', '强退成功')
        refreshPage()
      }
    })
}

/**
 * 显示条数回调
 * @param size 条目数
 */
 const handleSizeChange = (size: number) => {
  searchModel.value.size = size
  refreshPage()
}
/**
 * 页码回调
 * @param current 当前页
 */
const handleCurrentChange = (current: number) => {
  searchModel.value.current = current
  refreshPage()
}

const refreshPage = (isShowMsg: boolean = false) => {
  queryUsersOnline(searchModel.value)
    .then((res) => {
      if (isShowMsg) showMsg('success', '查询成功')
      onlineData.value = res.data.records
      searchModel.value.current = res.data.current
      searchModel.value.size = res.data.size
      total.value = res.data.total
    })
}
const init = () => {
  refreshPage()
}

init()
</script>

<style scoped lang="less">
.search-container {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
  .search-inp {
    width: 240px;
    margin-right: 10px;
  }
}
.online-container {
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}
</style>
